<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RGB 转 HSB 颜色转换器</title>
    <style>
        /* 基本样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            transition: background-color 0.3s ease;
        }

        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }

        .input-group {
            margin: 10px 0;
        }

        input {
            width: 80%;
            padding: 5px;
            margin-top: 5px;
            text-align: center;
        }

        button {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
        }

        button:hover {
            background-color: #45a049;
        }

        h2 {
            margin-top: 20px;
        }

        #hsbOutput {
            margin-top: 20px;
            font-size: 16px;
        }

        .output-text {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>RGB 转 HSB 颜色转换器</h1>
        <div class="input-group">
            <label for="r">红色 (R):</label>
            <input type="number" id="r" min="0" max="255" value="255">
        </div>
        <div class="input-group">
            <label for="g">绿色 (G):</label>
            <input type="number" id="g" min="0" max="255" value="0">
        </div>
        <div class="input-group">
            <label for="b">蓝色 (B):</label>
            <input type="number" id="b" min="0" max="255" value="0">
        </div>
        <button id="convertBtn">转换</button>

        <h2>HSB 值：</h2>
        <div id="hsbOutput">
            <p>色相 (H): <span id="hue" class="output-text">0</span>°</p>
            <p>饱和度 (S): <span id="saturation" class="output-text">0</span>%</p>
            <p>亮度 (B): <span id="brightness" class="output-text">100</span>%</p>
        </div>
    </div>

    <script>
        // RGB 转 HSB 函数
        const RGBToHSB = (r, g, b) => {
            r /= 255;
            g /= 255;
            b /= 255;
            const v = Math.max(r, g, b);
            const n = v - Math.min(r, g, b);
            const h = n && v === r ? (g - b) / n : v === g ? 2 + (b - r) / n : 4 + (r - g) / n;
            return [60 * (h < 0 ? h + 6 : h), v && (n / v) * 100, v * 100];
        };

        // 获取元素
        const rInput = document.getElementById('r');
        const gInput = document.getElementById('g');
        const bInput = document.getElementById('b');
        const convertBtn = document.getElementById('convertBtn');

        const hueOutput = document.getElementById('hue');
        const saturationOutput = document.getElementById('saturation');
        const brightnessOutput = document.getElementById('brightness');

        // 转换并更新显示的函数
        const convertAndUpdate = () => {
            const r = parseInt(rInput.value);
            const g = parseInt(gInput.value);
            const b = parseInt(bInput.value);

            // 获取 HSB 值
            const [hue, saturation, brightness] = RGBToHSB(r, g, b);

            // 更新 HSB 输出
            hueOutput.textContent = hue.toFixed(2);
            saturationOutput.textContent = saturation.toFixed(2);
            brightnessOutput.textContent = brightness.toFixed(2);

            // 更新页面背景色
            document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
        };

        // 为转换按钮添加点击事件监听器
        convertBtn.addEventListener('click', convertAndUpdate);

        // 为输入框添加实时更新事件监听器
        [rInput, gInput, bInput].forEach(input => {
            input.addEventListener('input', convertAndUpdate);
        });

        // 默认触发一次转换，确保页面加载时有初始背景色
        convertAndUpdate();
    </script>
</body>
</html>
